import React, { useEffect, useState } from 'react'
import { Tabs, Tag, Input } from 'antd';
import { MessageOutlined } from '@ant-design/icons'
import request from "../../../untils/request"
import "../../../api/list"
import { SETWORDLIST, ALLSTATE,LISTITEM, SHOWCOMMENTTS, ADDCOMMENTTS,COMMENTITEMTYPE } from "../../../type/store.d"
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from "react-router-dom"

import MyComments from '../../../component/Comment';

export default function Shou() {
  // 跳详情
  const navigate = useNavigate()
  const [inpValue, setInpValue] = useState("")
  const { TabPane } = Tabs;
  const dispatch = useDispatch()
  const onChange = (key: string) => {
    console.log(key);
  };
  const { TextArea } = Input;
  const list = useSelector((state: ALLSTATE) => {
    return state.wordList
  })
  useEffect(() => {
    if (list.length <= 0) {
      request.get("/api/list").then(res => {
        console.log(res.data.list, 123);
        dispatch({
          type: SETWORDLIST,
          payload: res.data.list
        })
      })
    }
  }, [])
  const toDetile = (id: string) => {
    navigate(`/detail/${id}`)
  }
  // 发布
  const toWrite = () => {
    navigate(`/weite`)
  }
  // 评论
  const handleChangeInput = (e: string) => {
    setInpValue(e)
  }
  const isShow = (id: string) => {
    dispatch({
      type: SHOWCOMMENTTS,
      payload: id
    })
  }
  const enterMess = (id: string) => {
    let data = {
      id: id,
      value: inpValue
    }
    dispatch({
      type: ADDCOMMENTTS,
      payload: data
    })
    setInpValue("")
  }
  return (
    <div>
      <button onClick={() => toWrite()}>发布文档</button>
      <Tabs defaultActiveKey="1" onChange={onChange}>
        <TabPane tab="Tab 1" key="1">
          <ul>
            {
              list && list.map((item: LISTITEM, index: number) => {
                return (<li key={index}>
                  <h3 onClick={() => toDetile(item.id as string)}>{item.title}</h3>
                  <p onClick={() => toDetile(item.id as string)}>{item.conter}</p>
                  {
                    item.tag && item.tag.map((ite, ind) => {
                      return <Tag key={ind} color="magenta">{ite}</Tag>
                    })
                  }
                  <p onClick={() => isShow(item.id as string)}>{item.commentsList && item.commentsList.length}评论<MessageOutlined /></p>
                  {/* {
                    item.isComments ? <TextArea value={inpValue} onChange={(e) => handleChangeInput(e.target.value)} onPressEnter={(e) => enterMess(item.id as string)} rows={4} placeholder="说点什么吧~" maxLength={50} /> : null
                  } */}
                  {
                    item.isComments ? <MyComments commentId={item.id as string} commentList={item.commentsList as COMMENTITEMTYPE[]} /> : null
                  }
                </li>)
              })
            }
          </ul>

        </TabPane>
        <TabPane tab="Tab 2" key="2">
          Content of Tab Pane 2
        </TabPane>
        <TabPane tab="Tab 3" key="3">
          Content of Tab Pane 3
        </TabPane>
      </Tabs>
    </div>
  )
}
